<template>
  <el-container>
    <el-header>
      <span>共{{ total }}个数据库</span>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :data="list.slice((query.page - 1) * query.page_size, query.page * query.page_size)"
        row-key="id" style="height: 480px;" :database="database">
        <el-table-column label="编号" prop="id" width="80"></el-table-column>
        <el-table-column label="数据库名称" prop="name" width="250"></el-table-column>
        <el-table-column label="数据类型" prop="type" width="180"></el-table-column>
        <el-table-column label="服务器名称" prop="hostname" width="250"></el-table-column>
        <el-table-column label="用户名" prop="username" width="180"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="100">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="table_show(scope.row)">详情</el-button>
              <!-- <el-button text type="primary" size="small">编辑</el-button> -->
              <!-- <el-button text type="primary" size="small">删除</el-button> -->
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
    <el-pagination background layout="prev, pager, next ,total,sizes" :total="total" :current-page="query.page"
      :page-size="query.page_size" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </el-container>
  <el-drawer v-model="dialog.info" :size="800" title="详细" direction="rtl" destroy-on-close>
    <info ref="infoDialog"></info>
  </el-drawer>
</template>

<script>
import info from '../view/info'
export default {
  name: 'listTree',
  components: {
    info
  },
  data() {
    return {
      query: {
        page: 1,
        page_size: 10
      },
      groupFilterText: "",
      dialog: {
        info: false
      },
      list: [
        { id: 1, name: 'dcs_platform', type: 'Kingbase', hostname: '39.103.143.154', username: 'system' }
      ],
      search: {
        keyword: ""
      },
      value1: true,
      total: 0,
      database: 5
    }
  },
  watch: {
    groupFilterText(val) {
      this.$refs.group.filter(val);
    },
    data() {
      this.total = this.list.length;
      this.database = this.totalx
    }
  },
  mounted() {
    this.total = this.list.length;
    this.database = this.total
  },
  methods: {
    //获取表格序号
    getIndex(index) {
      return (this.query.page - 1) * this.query.page_size + index + 1
    },
    handleSizeChange(val) {
      this.query.page = 1
      this.query.page_size = val
    },
    handleCurrentChange(val) {
      this.query.page = val
    },
  },
}
</script>

<style>
.nopadding {
  margin-top: -50px;
  height: 100%;
}
</style>
